<template>
  <div class="header-box">
    <el-row>
      <el-col :span="3">
        <i class="el-icon-s-unfold" @click="toRoute1"></i>
      </el-col>
      <el-col :span="18" class="input">
        <el-input placeholder="商品名" prefix-icon="el-icon-search" clearable size="small"></el-input>
      </el-col>
      <el-col :span="3">
        <span class="login" @click="toRoute2">登录</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "HeaderBox",
  methods: {
    toRoute1() {
      this.$router.push({
        path: "/classify",
        query:{
          title:'京东超市'
        }
      });
    },
    toRoute2() {
      this.$router.push({
        path: "/login"
      });
    }
  }
};
</script>

<style lang="less" scoped>
.header-box {
  height: 100%;
}
.el-row {
  height: 100%;
}
.el-col {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.el-icon-s-unfold {
  color: #fff;
  font-size: 6.9333vw;
}
.input {
  padding: 1.6vw 0;
}
.login {
  color: #fff;
  font-size: 3.7333vw;
}
/deep/ .el-input__inner {
  border-color: transparent;
  border-radius: 5.3333vw;
}
</style>